<template>
  <!--页面搭建-杜思成-->
  <layout-card
    v-model="search"
    :filters="ismapOptions"
    headline="信息列表"
    headtitle=" "
    :hasButton="true"
    @search-change="getData"
    @search-reset="searchReset"
  >
    <template #action>
      <el-button type="primary" @click="handleCreate('set')"
      >设置</el-button
      >
      <el-button type="primary" @click="handleCreate('recover')"
      >恢复</el-button
      >
      <el-button type="danger" plain @click="handleCreate('empty')">清空回收站</el-button>
    </template>
    <table-common
      :height="tableHeight"
      :columns="mapListColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="tabledata"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
      @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    >
      <!-- 维护图标提示 -->
      <template #houseName="{ row }">
        <el-text type="primary" v-if="remindList.includes(row.houseId)">
          <img
            src=""
            class="img"
            width="18"
            height="18"
            data-v-fae5bece=""
            style="background-color: red"
          />
        </el-text>
        {{ row["houseName"] }}
      </template>
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button class="link-btn" @click="oneRecovers(row)" link type="primary"
        >恢复</el-button
        >
        <el-popconfirm
          title="是否删除?"
          confirmButtonText="确定"
          cancelButtonText="取消"
          @confirm="() => DeletRow(row)"
        >
          <template #reference>
            <el-button class="link-btns" link type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </table-common>
  </layout-card>
  <!-- 设置弹窗开始 -->
  <el-dialog v-model="thresholdDialogVisible"  width="500"   center align-center style="border-radius: 12px">
    <div style="position: absolute;top: 18px;font-size: 16px;font-family: HarmonyOS_Sans_SC_Medium;color: #353A42;">设置</div>
    <div style="height: 100px">
      <span>
        设置删除时间:
      </span>
      <div style="margin-left: 20px">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="0">默认</el-radio>
        </el-radio-group>
        <span style="color: #AAA">&nbsp;&nbsp;&nbsp;&nbsp;系统默认储存1个月</span>
      </div>
      <div style="margin-left: 20px">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </div>
      <div style="margin-left: 80px" v-show="isShow">
        <el-form class="form">
          <el-input
            v-model="input3"
            placeholder=""
            width="150px"
            type="number"
            min = 0
            @change="inputsChange"
          >
            <template #append>
              <el-select v-model="select" placeholder="天" style="width: 80px">
                <el-option label="天" value="1" />
                <el-option label="月" value="2" />
              </el-select>
            </template>
          </el-input>
          <span style="color: #AAA">&nbsp;&nbsp;&nbsp;&nbsp;系统最大储存3个月</span>
        </el-form>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmDate('cancel')">取消</el-button>
        <el-button type="primary" @click="confirmDate('confirm')">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 设置弹窗结束 -->
</template>

<script lang="ts" setup>
  import { Search } from '@element-plus/icons-vue'
  const radio = ref(0)
  const input3 = ref('')
  const select = ref('')
  const isShow = ref(false)
  const tableHeight = ref(window.innerHeight - 440)
  /**
   * @radioChange 单选框的改变事件
   * @author
   * @date
   * @version V1.0.0
   * @return
   */
  const radioChange = (value: number ,number : boolean)=> {
    if (value == 1) {
      isShow.value = true
    } else { // 选中默认
      isShow.value = false
      input3.value = '1'
      select.value = '2'
    }
  }
  import {
    cultivateList,
    cultivateSelectSet,
    cultivateoneRecover,
    cultivateemptyRecover,updateRecycleTime
  } from "@/api/secure/recycleUnits";
  import { computed, ref, reactive, onBeforeMount, nextTick } from "vue";
  import LayoutCard from "@/components/LayoutCard/index.vue";
  import TableCommon from "@/components/TableCommon/index.vue";

  import { mapListColumns } from "@/views/secure/archives/cultivateRecycle/config/columns";
  import {
    mapOptions,
    dialogOptions,
    mapListFilters,
  } from "@/views/secure/archives/cultivateRecycle/config/filters";
  import {
    ElMessage, ElMessageBox,

  } from "element-plus";

  import FilterBar from "@/components/FilterBar/index.vue";
  import { getResource, postResource } from "@/api/resource";

  import { useStore } from "vuex";


  const stores = useStore();
  const organTree = stores.state.user.organTree; // 获取树
  const isdialogOptions = ref(dialogOptions);
  const ismapOptions = ref(mapOptions);
  const ismapListFilters = ref(mapListFilters);
  const thresholdDialogVisible = ref(false);

  const addTilte = ref(""); // 弹出框名称

  // 分页和数据展示参数
  const current = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const tabledata = ref([]);
  const search = ref({
    houseType:null,
    region:null,
    state:null
  });
  const pager = computed(() => ({
    currentPage: current.value,
    pageSize: pageSize.value,
    total: total.value,
    pageCount:
      Math.ceil(total.value / pageSize.value) === 0
        ? 1
        : Math.ceil(total.value / pageSize.value),
  }));

  /**
   * @functionName 分页、查询、排序、删除功能
   * @author 杜思成
   * @date 2023-08-08 17:46:09
   * @version V1.0.0
   */
  const changeCurrent = (value: number) => {
    current.value = value;
    getData();
  };
  const changePageSize = (size: number) => {
    pageSize.value = size;
    getData();
  };
  const order = ref([
    {
      column: "state",
      method: "asc",
    },
    {
      column: "lastUpdateTime",
      method: "desc",
    },
  ]);

  /**
   * 取消和确定
   */
  const confirmDate = (value: string) => {
    thresholdDialogVisible.value = false
    // 确定
    if (value === 'confirm') {
      let obj={
        pageType: '2',
        dateType: select.value,
        setTime: input3.value,
        isDefault: radio.value
      }
      updateRecycleTime(obj).then((res) => {

      });
    }
  }
  /**
   * @functionName 获取数据
   * @author 彭庆楠
   * @date 2023-08-08 17:47:31
   * @version V1.0.0
   * @return
   */
  const getData = async () => {
    let startTime = null
    let endTime = null
    if (search.value?.createTime!= undefined ) {
      startTime = search.value?.createTime[0]
      endTime = search.value?.createTime[1]
    }
    const searchList = {
      unitNumber: search.value?.unitNumber,
      unitName: search.value?.unitName,
      startTime: startTime,
      endTime: endTime,
    };
    const playout = {
      pageNum: current.value,
      pageSize: pageSize.value,
      condition: searchList,
    };
    await cultivateList(playout).then((res) => {
      tabledata.value = res?.data?.list;
      total.value = res?.data?.total;
    });
  };
  /**
   * @functionName 排序事件
   * @param {any} data 传入的某一列的列名和升降序
   * @author 彭庆楠
   * @date 2023-08-17 17:48:41
   * @version V1.0.0
   * @return
   */
  const sortChange = (data: any) => {
    const method = data.order === "ascending" ? "asc" : "desc";
    order.value[0].column = data.prop;
    order.value[0].method = method;
    getData();
  };
  // 删除
  const DeletRow = (row: any) => {
    const obj = {
      id: row.id,
      isJudeg: '2'
    }
    cultivateoneRecover(obj).then((res) => {
      if(res.message == 'success'){
        // 重新查询
        getData()
      }
    });
  };

  /**
   * @functionName 新增、编辑弹出框
   * @param {any} val 判断打开那个弹窗
   * @description
   * @author 彭庆楠
   * @date 2023-08-08 17:53:22
   * @version V1.0.0
   * @return
   */
  const handleCreate = (val: any) => {
    // 设置
    if (val === "set") {
      // 弹窗标题
      thresholdDialogVisible.value = true;
      addTilte.value = "设置";
      ismapListFilters.value[0].defaultValue = '';
      ismapListFilters.value[1].defaultValue = '';
      const obj ={
        pageType:'2',
      }
      // 获取当前页面设置的清除时长
      cultivateSelectSet(obj).then((res)=>{
        // 默认
        if (res[0].isDefault == "0") {
          radio.value = 0
          isShow.value = false
        } else {
          radio.value = 1
          isShow.value = true
        }

        // 设置天，和月
        select.value = res[0].dateType

        // 设置时间
        input3.value = res[0].setTime
      })
    } else if (val === "recover") { // 恢复
      // 判断未选中进行提示
      if (multipleSelection.value.length === 0) {
        ElMessage({
          message: '请选中至少一条数据',
          type: 'warning',
        })
      } else { // 进行修改

        for (let i=0; i<multipleSelection.value.length; i++){
          const obj ={
            id:multipleSelection.value[i].id,
            isJudeg: '0'
          }
          cultivateoneRecover(obj).then((res) => {
            if (i=== multipleSelection.value.length-1) {
              getData()
            }
          });
        }

      }
    } else if (val === "empty") { // 清空回收站
      ElMessageBox.confirm(
        '操作不可逆，是否清空回收站?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          // 清空回收站
          cultivateemptyRecover().then((res) => {
            if(res.message == 'success'){
              // 重新查询
              getData()
              ElMessage({
                type: 'success',
                message: '清空成功',
              })
            }
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消',
          })
        })
    }
  };
  /**
   * 恢复
   */
  const oneRecovers = async (row: any) => {
    const obj ={
      id:row.id,
      isJudeg: '0'
    }
    cultivateoneRecover(obj).then((res) => {
      if(res.message == 'success'){
        // 重新查询
        getData()
      }
    });
  };

  const FilterRef = ref({});

  /**
   * @functionName 重置功能
   * @param {FilterDataType} data
   * @description
   * @author 杜思成
   * @date 2023-08-17 17:55:57
   * @version V1.0.0
   * @return
   */
  const searchReset = (data: FilterDataType) => {
    search.value = data;
    pager.value.currentPage = 1;
    pager.value.pageSize = 10;
    getData();
  };

  onBeforeMount(() => {
    getData();
  });
  const multipleSelection = ref<User[]>([])
  interface User {
    id:string
    unitNumber: string
    unitName: string
    rummagerTime: string
    updateTime: string
  }


  /**
   *  table列表多选事件
   */
  const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
  }
</script>
<style scoped>

  .form {
    .el-input {
      width: 150px;
    }
  }
  .el-dialog__header {
    text-align: left;
  }
  .link-btn{
    color: #2F7DF1;
  }

  .link-btns{
    color:#F24A45;
  }
</style>
